import { Checkbox, CheckboxGroup, View, Text } from "@tarojs/components";
import { Paragraph } from "@/components";
import style from "./index.module.scss";
import { colors } from "@/data/shared/colors";
import { navigateTo } from "@/utils/navigation";

interface TermsProps {
  checked: boolean;
  termsConditionCb: (accepted: boolean) => void;
  nameInputForm?: boolean;
  isProduct?: boolean;
}

export const C40TermsAndConditions = ({
  checked,
  termsConditionCb,
  nameInputForm = false,
  isProduct = false,
}: TermsProps) => {
  return (
    <>
      <View className={style["terms-agreement-container"]}>
        <CheckboxGroup
          onChange={(e) => {
            // Only have elements in array if checked
            const agreed = !!e.detail.value.length;
            termsConditionCb(agreed);
          }}
        >
          <Checkbox value={"t&c"} checked={checked} color={colors.colorGrey} />
        </CheckboxGroup>
        {nameInputForm ? (
          <Paragraph color={colors.colorGrey} size="small" noSpacing>
            我已年满18周岁
          </Paragraph>
        ) : (
          <Paragraph color={colors.colorGrey} size="small" noSpacing>
            我已阅读并同意
            <Text
              className={style["inline-text-link"]}
              onClick={() => {
                navigateTo("pages/terms-conditions/index");
              }}
            >
              销售条款
            </Text>
            &
            <Text
              className={style["inline-text-link"]}
              onClick={() => {
                navigateTo("pages/privacy-policy/index");
              }}
            >
              隐私政策
            </Text>
            。
          </Paragraph>
        )}
      </View>
      {/* More info.... should come from CMS?, but include link */}
      {/* {!isProduct && !nameInputForm && (
        <View>
          <Paragraph
            className={style["inline-text"]}
            color={colors.colorGrey}
            size="small"
            noSpacing
          >
            购买须知：每位学员每个自然年限内限使用1次取消订购，在课程及讲座开课前至少七（7）天向客服申请，详情请查阅
          </Paragraph>
          <Paragraph
            className={style["inline-text-link"]}
            color={colors.colorGrey}
            size="small"
            noSpacing
            onClick={() => {
              navigateTo("pages/terms-conditions/index");
            }}
          >
            客户取消的权利
          </Paragraph>
        </View>
      )} */}
    </>
  );
};
